<template>
  <div>
    <el-card style="border-radius: 12px; height: 80px">
      <el-form inline style="margin-top: 10px">
        <el-form-item label="会议室号:">
          <el-col>
            <el-input
              style="width: 120px"
              placeholder="请输入会议室号"
              clearable
              v-model="roomNumber"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="名称:">
          <el-input
            style="width: 120px"
            placeholder="请输入会议室名"
            clearable
            v-model="name"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input
            style="width: 100px"
            placeholder="请输入地址"
            clearable
            v-model="address"
          ></el-input>
        </el-form-item>
        <el-form-item label="使用情况:">
          <el-select
            v-model="status"
            clearable
            placeholder="请选择"
            style="width: 100px"
            size="default"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备情况:">
          <el-select
            v-model="isEquipment"
            clearable
            placeholder="请选择"
            style="width: 100px"
            size="default"
          >
            <el-option
              v-for="item in EquipmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            style="margin-left: 20px"
            type="primary"
            icon="Search"
            @click="getRoomData()"
          ></el-button>
          <el-button
            @click="
              ;(roomNumber = ''),
                (name = ''),
                (address = ''),
                (status = ''),
                (isEquipment = ''),
                getRoomData()
            "
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin: 10px 0">
      <!-- 会议室列表区 -->
      <el-form-item style="text-align: right">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-button type="primary" @click="roomView">添加会议室</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-table :data="roomData" style="margin: 10px 0px" border>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          prop="index"
          hidden="false"
        ></el-table-column>
        <el-table-column
          label="会议室号"
          align="center"
          prop="roomNumber"
        ></el-table-column>
        <el-table-column
          label="名称"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="地址"
          align="center"
          prop="address"
        ></el-table-column>
        <el-table-column
          label="可容纳人数"
          align="center"
          prop="maxSize"
        ></el-table-column>

        <el-table-column label="会议室状态" align="center">
          <template #="{ row, $index }">
            <el-switch
              disabled
              v-model="row.status"
              :active-icon="Check"
              :inactive-icon="Close"
              style="margin-left: 24px"
              inline-prompt
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="设备状态" align="center">
          <template #="{ row, $index }">
            <el-switch
              disabled
              v-model="row.isEquipment"
              :active-icon="Check"
              :inactive-icon="Close"
              style="margin-left: 24px"
              inline-prompt
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="会议操作" align="center">
          <template #="{ row, $index }">
            <el-tooltip
              effect="dark"
              content="修改会议室信息"
              placement="top"
              :enterable="false"
            >
              <el-button
                size="small"
                type="primary"
                icon="Edit"
                @click="updateRoomView(row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除会议室"
              placement="top"
              :enterable="false"
            >
              <el-popconfirm
                :title="`删除: ${row.name}?`"
                icon="Delete"
                icon-color="red"
                @confirm="deleteRoom(row.id)"
              >
                <template #reference>
                  <el-button
                    size="small"
                    type="danger"
                    icon="Delete"
                  ></el-button>
                </template>
              </el-popconfirm>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 
 v-model:current-page ：当前页
 v-model:page-size：设置每页展示数据的条数
       -->
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="prev, pager, next, jumper, -> ,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="getRoomData"
      />
    </el-card>
    <!-- 添加会议室对话框 -->
    <el-dialog
      :title="roomParams.id ? '修改会议室' : '新增会议室'"
      v-model="addDialogVisible"
      width="30%"
    >
      <el-form
        style="width: 80%"
        label-width="100px"
        :model="roomParams"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="会议室编号" prop="roomNumber">
          <el-input
            placeholder="请输入会议室编号"
            v-model="roomParams.roomNumber"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议室名称" prop="name">
          <el-input
            placeholder="请输入会议室名称"
            v-model="roomParams.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="会议室地址" prop="address">
          <el-input
            placeholder="请输入会议室地址"
            v-model="roomParams.address"
          ></el-input>
        </el-form-item>
        <el-form-item label="可容纳人数" prop="maxSize">
          <el-input
            placeholder="请输入会议室可容纳人数"
            v-model="roomParams.maxSize"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备情况" prop="isEquipment">
          <el-radio-group v-model="roomParams.isEquipment">
            <el-radio :label="true" size="large">正常</el-radio>
            <el-radio :label="false" size="large">维护</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="会议室情况" prop="status">
          <el-radio-group v-model="roomParams.status">
            <el-radio :label="true" size="large">空闲</el-radio>
            <el-radio :label="false" size="large">使用中</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateRoom">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from 'vue'
import {
  reqSearchRoomData,
  reqAddOrUpdateRoomData,
  reqDeleteRoomData,
} from '@/api/room/information'
import type {
  Rooms,
  RoomInformationResponseData,
  RoomInformation,
  ResponseData,
  searchRoom,
} from '@/api/room/information/type'
import { Check, Close } from '@element-plus/icons-vue'
import { number } from 'echarts'
// 当前页码s
let pageNo = ref<number>(1)
// 定义每页展示数据
let limit = ref<number>(10)
// 定义展示数据的总数
let total = ref<number>(0)

// 定义已有会议室的数据
let roomData = ref<Rooms>([])

//  定义新增会议室数据
let roomParams = reactive<any>({
  roomNumber: '',
  name: '',
  address: '',
  maxSize: '',
  isEquipment: '',
  status: '',
})

let roomNumber = ref<string>()
let name = ref<string>()
let isEquipment = ref<boolean | string>()
let address = ref<string>()
let status = ref<boolean | string>()
// 定义搜索框会议室信息

//添加会议对话框
let addDialogVisible = ref<boolean>(false)

// 获取el-form 组件实例
let formRef = ref()

const statusOptions = [
  {
    value: '',
    label: '默认',
  },
  {
    value: false,
    label: '使用中',
  },
  {
    value: true,
    label: '空闲',
  },
]
const EquipmentOptions = [
  {
    value: '',
    label: '默认',
  },
  {
    value: false,
    label: '维护中',
  },
  {
    value: true,
    label: '良好',
  },
]

// 获取会议室信息方法
const getRoomData = async (page = 1) => {
  pageNo.value = page
  let params = {
    roomNumber: roomNumber.value ? roomNumber.value : '',
    name: name.value ? name.value : '',
    address: address.value ? address.value : '',
    isEquipment: isEquipment.value,
    status: status.value,
    currentPage: pageNo.value,
    pageSize: limit.value,
  }
  let result: RoomInformationResponseData = await reqSearchRoomData(params)
  if (result.code == 200) {
    // 存储已有品牌的总数
    total.value = result.data.total
    roomData.value = result.data.records
  }
}
// 组件挂载完毕
onMounted(() => {
  getRoomData()
})
// 更改分页器大小
const handleSizeChange = () => {
  getRoomData()
}
// 添加或修改会议室方法
const addOrUpdateRoom = async () => {
  // 发送请求之前对整个表单进行校验
  await formRef.value.validate()
  let result: ResponseData = await reqAddOrUpdateRoomData(roomParams)
  if (result.code == 200) {
    addDialogVisible.value = false
    ElNotification({
      type: 'success',
      message: roomParams.id ? '修改会议室成功' : '添加会议室成功',
    }),
      // 再次发请求更新所有数据
      getRoomData(roomParams.id ? pageNo.value : 1)
  } else {
    ElNotification({
      type: 'error',
      message: roomParams.id ? '修改会议室失败' : '添加会议室失败',
    })
  }
}
// 修改会议室信息 row 为当前信息
const updateRoomView = (row: RoomInformation) => {
  nextTick(() => {
    for (const key in roomParams) {
      formRef.value.clearValidate(key)
    }
  })
  ;(addDialogVisible.value = true), Object.assign(roomParams, row)
}
// 删除确认框按钮回调
const deleteRoom = async (id: number) => {
  console.log('delete')

  // 点击确定按钮删除请求发送
  let result = await reqDeleteRoomData(id)
  if (result.code == 200) {
    ElNotification({
      type: 'success',
      message: '删除成功',
    })
    getRoomData(roomData.value.length > 1 ? pageNo.value : pageNo.value - 1)
  } else {
    ElNotification({
      type: 'error',
      message: '删除失败',
    })
  }
}
// 表单取消按钮
const cancel = () => {
  addDialogVisible.value = false
}
// 表单确定按钮
const roomView = () => {
  addDialogVisible.value = true
  //  清空收集 的数据
  ;(roomParams.id = 0),
    (roomParams.roomNumber = ''),
    (roomParams.name = ''),
    (roomParams.address = ''),
    (roomParams.maxSize = ''),
    (roomParams.isEquipment = true),
    (roomParams.status = true),
    nextTick(() => {
      for (const key in roomParams) {
        formRef.value.clearValidate(key)
      }
    })
}
const validatorRoomNumber = (rule: any, value: any, callback: any) => {
  if (value && value.length >= 3) {
    callback()
  } else {
    callback(new Error('长度至少3位'))
  }
}

const validatorName = (rule: any, value: any, callback: any) => {
  if (value && value.length >= 3) {
    callback()
  } else {
    callback(new Error('长度至少3位'))
  }
}
const validatorMaxSize = (rule: any, value: any, callback: any) => {
  if (value && value <= 50) {
    callback()
  } else {
    callback(new Error('不超过50人'))
  }
}
const rules = {
  roomNumber: [
    { required: true, trigger: 'blur', validator: validatorRoomNumber },
  ],
  name: [{ required: true, trigger: 'blur', validator: validatorName }],
  maxSize: [{ required: true, trigger: 'blur', validator: validatorMaxSize }],
  isEquipment: [],
  status: [],
}
</script>

<style scoped lang="scss"></style>
